Žiniatinklio srautai: efektyvus duomenų apdorojimas šiuolaikinėms programoms

Nuolat besikeičiančioje žiniatinklio kūrimo srityje efektyvus duomenų valdymas yra svarbiausias dalykas. Kai programos tampa vis intensyvesnės duomenų atžvilgiu, tradiciniai viso duomenų rinkinio įkėlimo ir apdorojimo metodai dažnai sukelia našumo problemas ir lėtą vartotojo patirtį. Žiniatinklio srautai siūlo galingą alternatyvą, leidžiančią kūrėjams apdoroti duomenis palaipsniui, pagerinti reagavimą ir sumažinti atminties suvartojimą.

Kas yra žiniatinklio srautai?

Žiniatinklio srautai yra moderni JavaScript API, suteikianti sąsają darbui su duomenų srautais. Jie leidžia apdoroti duomenis dalimis, kai tik jie tampa prieinami, užuot laukus, kol bus įkeltas visas duomenų rinkinys. Tai ypač naudinga:

• Tvarkant didelius failus (pvz., vaizdo, garso ar didelius tekstinius failus).
• Apdorojant duomenis iš tinklo užklausų realiu laiku.
• Kuriant jautrias vartotojo sąsajas, kurios atsinaujina gavus duomenis.
• Taupant atmintį apdorojant duomenis mažesnėmis dalimis.

Srautų API susideda iš kelių pagrindinių sąsajų:

• ReadableStream: Nurodo duomenų šaltinį, iš kurio galite skaityti.
• WritableStream: Nurodo duomenų paskirties vietą, į kurią galite rašyti.
• TransformStream: Nurodo transformacijos procesą, kuris skaito duomenis iš ReadableStream, juos transformuoja ir rezultatą rašo į WritableStream.
• ByteLengthQueuingStrategy: Eilės sudarymo strategija, kuri matuoja duomenų dalių dydį baitais.
• CountQueuingStrategy: Eilės sudarymo strategija, kuri skaičiuoja duomenų dalių skaičių.

Žiniatinklio srautų naudojimo privalumai

Žiniatinklio srautų pritaikymas jūsų programose suteikia keletą reikšmingų privalumų:

Pagerintas našumas

Apdorodami duomenis dalimis, žiniatinklio srautai leidžia pradėti dirbti su duomenimis anksčiau, net prieš įkeliant visą duomenų rinkinį. Tai gali žymiai pagerinti jūsų programos suvokiamą našumą ir suteikti jautresnę vartotojo patirtį. Pavyzdžiui, įsivaizduokite didelio vaizdo failo transliavimą. Naudojant žiniatinklio srautus, vartotojas gali pradėti žiūrėti vaizdo įrašą beveik iš karto, užuot laukęs, kol bus atsiųstas visas failas.

Sumažintas atminties naudojimas

Užuot įkėlę visą duomenų rinkinį į atmintį, žiniatinklio srautai apdoroja duomenis palaipsniui. Tai sumažina atminties suvartojimą ir padaro jūsų programą efektyvesnę, ypač dirbant su dideliais failais ar nuolatiniais duomenų srautais. Tai labai svarbu įrenginiams su ribotais ištekliais, tokiems kaip mobilieji telefonai ar įterptosios sistemos.

Padidintas jautrumas

Žiniatinklio srautai leidžia atnaujinti vartotojo sąsają, kai tik gaunami duomenys, suteikiant interaktyvesnę ir patrauklesnę patirtį. Pavyzdžiui, galite rodyti progreso juostą, kuri atsinaujina realiu laiku, kai failas yra atsisiunčiamas, arba rodyti paieškos rezultatus, kai vartotojas rašo. Tai ypač svarbu programoms, kurios tvarko realaus laiko duomenis, pvz., pokalbių programoms ar tiesioginėms informacinėms panelėms.

Atgalinio slėgio valdymas

Žiniatinklio srautai turi integruotus atgalinio slėgio mechanizmus, kurie leidžia srauto vartotojui signalizuoti gamintojui, kad sulėtintų greitį, jei jis negali apdoroti duomenų taip greitai, kaip jie yra generuojami. Tai neleidžia vartotojui būti perkrautam ir užtikrina, kad duomenys būtų apdorojami efektyviai ir patikimai. Tai yra kritiškai svarbu tvarkant duomenis iš nepatikimų tinklo jungčių arba apdorojant duomenis skirtingais greičiais.

Komponuojamumas ir pakartotinis panaudojamumas

Žiniatinklio srautai yra sukurti taip, kad juos būtų galima komponuoti, o tai reiškia, kad galite lengvai sujungti kelis srautus į grandinę, kad sukurtumėte sudėtingas duomenų apdorojimo eiles. Tai skatina kodo pakartotinį panaudojamumą ir palengvina programų kūrimą bei priežiūrą. Pavyzdžiui, galite sukurti srautą, kuris skaito duomenis iš failo, transformuoja juos į kitą formatą, o tada rašo į kitą failą.

Panaudojimo atvejai ir pavyzdžiai

Žiniatinklio srautai yra universalūs ir gali būti pritaikyti įvairiems naudojimo atvejams. Štai keletas pavyzdžių:

Vaizdo ir garso transliacija

Žiniatinklio srautai idealiai tinka vaizdo ir garso turinio transliacijai. Apdorojant medijos duomenis dalimis, galite pradėti leisti turinį beveik iš karto, net prieš atsisiunčiant visą failą. Tai suteikia sklandžią ir jautrią peržiūros patirtį, ypač esant lėtesniems tinklo ryšiams. Populiarios vaizdo transliacijų paslaugos, tokios kaip „YouTube“ ir „Netflix“, naudoja panašias technologijas, kad užtikrintų sklandų vaizdo atkūrimą visame pasaulyje.

Pavyzdys: vaizdo įrašo transliavimas naudojant ReadableStream ir <video> elementą:

            
async function streamVideo(url, videoElement) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }

    // Append the chunk to the video element
    // (Requires a mechanism to handle appending data to the video source)
    appendBuffer(videoElement, value);
  }
}

            

              
                Copy
              
            
          

Didelių tekstinių failų apdorojimas

Dirbant su dideliais tekstiniais failais, tokiais kaip žurnalų ar CSV failai, žiniatinklio srautai gali žymiai pagerinti našumą. Apdorodami failą eilutė po eilutės, galite išvengti viso failo įkėlimo į atmintį, taip sumažindami atminties suvartojimą ir pagerindami reagavimą. Duomenų analizės platformos dažnai naudoja srautus didžiuliams duomenų rinkiniams apdoroti realiu laiku.

Pavyzdys: didelio tekstinio failo skaitymas ir eilučių skaičiavimas:

            
async function countLines(file) {
  const stream = file.stream();
  const decoder = new TextDecoder();
  let reader = stream.getReader();
  let result = await reader.read();
  let lines = 0;
  let partialLine = '';

  while (!result.done) {
    let chunk = decoder.decode(result.value);
    let chunkLines = (partialLine + chunk).split('\n');
    partialLine = chunkLines.pop() || '';
    lines += chunkLines.length;
    result = await reader.read();
  }

  // Account for a last line if it exists
  if (partialLine) {
    lines++;
  }

  return lines;
}

            

              
                Copy
              
            
          

Duomenų apdorojimas realiu laiku

Žiniatinklio srautai puikiai tinka realaus laiko duomenims, pvz., iš jutiklių, finansų rinkų ar socialinių tinklų srautų, tvarkyti. Apdorodami duomenis, kai jie gaunami, galite kurti jautrias programas, kurios vartotojui teikia naujausią informaciją. Finansinės prekybos platformos labai priklauso nuo srautų, kad galėtų rodyti tiesioginius rinkos duomenis.

Pavyzdys: duomenų apdorojimas iš WebSocket srauto:

            
async function processWebSocketStream(url) {
  const socket = new WebSocket(url);

  socket.onmessage = async (event) => {
    const stream = new ReadableStream({
      start(controller) {
        controller.enqueue(new TextEncoder().encode(event.data));
        controller.close(); // Close stream after processing one event
      }
    });

    const reader = stream.getReader();
    let result = await reader.read();
    while (!result.done) {
      const decodedText = new TextDecoder().decode(result.value);
      console.log('Received data:', decodedText);
      result = await reader.read(); // Should only run once since the stream closes
    }
  };
}

            

              
                Copy
              
            
          

Vaizdų apdorojimas

Žiniatinklio srautai gali palengvinti efektyvesnį vaizdų apdorojimą. Srautiniu būdu perduodami vaizdo duomenis, galite atlikti transformacijas ir manipuliacijas neįkeliant viso vaizdo į atmintį. Tai ypač naudinga dideliems vaizdams arba taikant sudėtingus filtrus. Internetiniai vaizdų redaktoriai dažnai naudoja srautinį apdorojimą geresniam našumui.

Žiniatinklio srautų diegimas: praktinis vadovas

Panagrinėkime paprastą pavyzdį, kaip naudoti žiniatinklio srautus tekstiniam failui skaityti ir jo turiniui apdoroti.

1. Sukurkite ReadableStream iš failo:

            
async function processFile(file) {
  const stream = file.stream();
  const reader = stream.getReader();
  const decoder = new TextDecoder();
  let result = await reader.read();

  while (!result.done) {
    const chunk = decoder.decode(result.value);
    console.log('Processing chunk:', chunk);
    result = await reader.read();
  }

  console.log('File processing complete.');
}

            

              
                Copy
              
            
          

2. Sukurkite WritableStream duomenims išvesti:

            
const writableStream = new WritableStream({
  write(chunk) {
    console.log('Writing chunk:', chunk);
    // Perform writing operations here (e.g., write to a file, send to a server)
  },
  close() {
    console.log('WritableStream closed.');
  },
  abort(reason) {
    console.error('WritableStream aborted:', reason);
  }
});

            

              
                Copy
              
            
          

3. Sukurkite TransformStream duomenims apdoroti:

            
const transformStream = new TransformStream({
  transform(chunk, controller) {
    const transformedChunk = chunk.toUpperCase();
    controller.enqueue(transformedChunk);
  }
});

            

              
                Copy
              
            
          

4. Sujunkite srautus:

            
// Example: Reading from a file, transforming to uppercase, and writing to the console
async function processFileAndOutput(file) {
  const stream = file.stream();
  const decoder = new TextDecoder();
  const reader = stream.getReader();

  let result = await reader.read();

  while (!result.done) {
    const chunk = decoder.decode(result.value);
    const transformedChunk = chunk.toUpperCase();
    console.log('Transformed chunk:', transformedChunk);

    result = await reader.read();
  }

  console.log('File processing complete.');
}

            

              
                Copy
              
            
          

Pastaba: `pipeTo` metodas supaprastina ReadableStream prijungimo prie WritableStream procesą:

            
//Simplified example using pipeTo
async function processFileAndOutputPiped(file) {
  const stream = file.stream();

  const transformStream = new TransformStream({
    transform(chunk, controller) {
      const transformedChunk = new TextEncoder().encode(chunk.toUpperCase());
      controller.enqueue(transformedChunk);
    }
  });

  const writableStream = new WritableStream({
    write(chunk) {
      console.log('Writing chunk:', new TextDecoder().decode(chunk));
    }
  });

  await stream
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(transformStream)
    .pipeTo(writableStream);
}

            

              
                Copy
              
            
          

Geriausios praktikos dirbant su žiniatinklio srautais

Norėdami maksimaliai išnaudoti žiniatinklio srautų privalumus, atsižvelkite į šias geriausias praktikas:

• Pasirinkite tinkamą eilės strategiją: Pasirinkite tinkamą eilės strategiją (ByteLengthQueuingStrategy arba CountQueuingStrategy), atsižvelgdami į savo duomenų pobūdį ir programos reikalavimus.
• Klaidų tvarkymas: Įdiekite patikimą klaidų tvarkymą, kad sklandžiai apdorotumėte netikėtas klaidas ar išimtis srauto apdorojimo metu.
• Efektyvus atgalinio slėgio valdymas: Naudokite integruotus atgalinio slėgio mechanizmus, kad vartotojas nebūtų perkrautas ir užtikrintumėte efektyvų duomenų apdorojimą.
• Optimizuokite duomenų dalių dydį: Eksperimentuokite su skirtingais duomenų dalių dydžiais, kad rastumėte optimalų našumo ir atminties suvartojimo balansą. Mažesnės dalys gali sukelti dažnesnes apdorojimo pridėtines išlaidas, o didesnės dalys gali padidinti atminties naudojimą.
• Naudokite TransformStreams duomenų transformavimui: Pasinaudokite TransformStreams, kad atliktumėte duomenų transformacijas moduliniu ir pakartotinai naudojamu būdu.
• Apsvarstykite „Polyfills“ naudojimą: Nors žiniatinklio srautai yra plačiai palaikomi moderniose naršyklėse, apsvarstykite galimybę naudoti „polyfills“ senesnėms naršyklėms, kad užtikrintumėte suderinamumą.

Naršyklių suderinamumas

Žiniatinklio srautus palaiko visos modernios naršyklės, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau senesnėms naršyklėms gali prireikti „polyfills“, kad būtų užtikrintas suderinamumas. Naršyklių suderinamumą galite patikrinti naudodamiesi tokiais ištekliais kaip „Can I use“.

Išvada

Žiniatinklio srautai siūlo galingą ir efektyvų būdą tvarkyti duomenis moderniose žiniatinklio programose. Apdorodami duomenis palaipsniui, galite pagerinti našumą, sumažinti atminties suvartojimą ir sukurti jautresnę vartotojo patirtį. Nesvarbu, ar transliuojate vaizdo įrašus, apdorojate didelius tekstinius failus, ar tvarkote realaus laiko duomenis, žiniatinklio srautai suteikia įrankius, reikalingus aukšto našumo ir mastelio programoms kurti.

Kadangi žiniatinklio programos toliau tobulėja ir reikalauja efektyvesnio duomenų apdorojimo, žiniatinklio srautų įvaldymas tampa vis svarbesnis žiniatinklio kūrėjams visame pasaulyje. Pasinaudodami šia technologija, galite kurti greitesnes, jautresnes ir malonesnes naudoti programas.

Papildoma literatūra

• MDN Web Docs: Srautų API
• Web.dev: Srautai
• Jake Archibald: Srautai realiame pasaulyje